#include('header.html', {title: '用户注册'})

<style>

  @media (max-width: 750px) {
    .register-main {
      padding: 20px 0 0!important;
    }
  }
  
  .register-main {
    padding: 40px 45px 20px;
  }

  .input-lg {
    font-size: 15px;
  }

  .btn-lg {
    padding: 12px 0!important;
  }
</style>

<div id="content-container" class="container">
  <div class="es-section login-section">
    <div class="logon-tab clearfix">
      <a href="/login">登录帐号</a>
      <a class="active">注册帐号</a>
    </div>
    <div class="register-main">
      <form @submit.prevent="register">
        <div class="form-group mbl">
          <label class="control-label required">姓名</label>
          <div class="controls">
            <input type="text" v-model="user.name" class="form-control input-lg"
                   placeholder="请填写真实姓名" required>
            <p class="help-block"></p>
          </div>
        </div>
        <div class="form-group mbl">
          <label class="control-label required">邮箱帐号</label>
          <div class="controls">
            <input type="email" v-model="user.email" class="form-control input-lg"
                   placeholder="填写你常用的邮箱作为登录帐号" required>
            <p class="help-block"></p>
            <!--<p id="register_nickname-error" class="form-error-message jq-validate-error">邮箱已被注册</p>-->
          </div>
        </div>
        <div class="form-group mbl">
          <label class="control-label required" for="register_nickname">用户名</label>
          <div class="controls">
            <input type="text" id="register_nickname" name="nickname" required="required"
                   v-model="user.username"
                   class="form-control input-lg" data-url=""
                   placeholder="最长18个英文字符" aria-required="true"
                   aria-describedby="register_nickname-error"
                   aria-invalid="true">
            <p class="help-block" style="display: none;"></p>
            <!--<p id="register_nickname-error" class="form-error-message jq-validate-error"  form-control-error  has-error>名称已被注册</p>-->
          </div>
        </div>

        <div class="form-group mbl">
          <label class="control-label required" for="register_password">密码</label>
          <div class="controls">
            <input type="password" id="register_password" name="password" required="required"
                   v-model="user.password"
                   class="form-control input-lg" placeholder="5-20位英文、数字、符号，区分大小写" aria-required="true"
                   aria-invalid="false">
            <p class="help-block"></p>
          </div>
        </div>
        <div class="form-group mbl  email_mobile_msg">
          <label class="control-label required" for="sms_code">邮箱验证码</label>
          <div class="controls row">
            <div class="col-xs-7">
              <input type="text" class="form-control input-lg" v-model="user.validate" id="sms_code" required="required"
                     name="sms_code"
                     placeholder="填写你的邮箱验证码"
                     data-url="">
              <p class="help-block"></p>
            </div>
            <div class="col-xs-5">
              <button id="secondShow" @click.prevent=sendEmail()
                      class="btn btn-primary btn-lg btn-block"
                      style="text-align:center;">获取验证码</button>
            </div>
          </div>
        </div>
        <div class="form-group mbl">
          <label class="control-label required">注册角色</label>
          <div class="controls">
            <div class="radio-beauty-container">
              <label>
                <input type="radio" value="1" id="student" v-model="user.role"/>
                <label for="student" class="radio-beauty"></label>
                <span class="radio-name" style="font-size: 16px;">学生</span>
              </label>
              <label>
                <input type="radio" value="2" id="teacher" v-model="user.role"/>
                <label for="teacher" class="radio-beauty"></label>
                <span class="radio-name" style="font-size: 16px;">老师</span>
              </label>
              <!--<label>
                <input type="radio" value="3" id="admin" v-model="user.role"/>
                <label for="admin" class="radio-beauty"></label>
                <span class="radio-name" style="font-size: 16px;">管理员</span>
              </label>-->
            </div>
          </div>
        </div>
        <div class="form-group mbl">
          <div class="controls">
            <button type="submit" id="register-btn" data-submiting-text="正在提交..."
                    class="btn btn-primary btn-lg btn-block">注册
            </button>
          </div>
        </div>
        <input type="hidden" name="captcha_enabled" value="1">
        <input type="hidden" name="_csrf_token" value="ZOwpJgi5H9Nm9-wMt0iYsTK3Vp-FXwzLD_sl4J5YPLc">
      </form>
    </div>
  </div>
</div>
<style>
  input[type=radio]:after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    line-height: 14px;
    font-size: 16px;
    color: #fff;
    border: 2px solid #ddd;
    background-color: #fff;
    box-sizing: border-box;
    position: relative;
    left: -2px;
  }

  input[type=radio]:checked:after {
    content: "";
    transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
    -webkit-transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
    border: 4px solid #5774FF;
  }
</style>
<script>
  var vm = new Vue({
    el: '.register-main',
    data: {
      user: {
        username: null,
        password: null,
        email: null,
        validate: '',
        codeMd5: '',
        role: 1
      }
    },
    methods: {
      sendEmail: function () {
        var self = this;
        var email = self.user.email;
        var count = 60;
        var btn = $('#secondShow');
        var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
        if (!reg.test(email)) { //正则验证不通过，格式不对
          btn.html("请填写正确的邮箱！").css("background-color", "red");
          return false;
        } else {
          $.post("/user/sendEmail", {email: email}, function (data) {
            if (data.success) {
              self.user.codeMd5 = data.payload;
            } else {
              layer.msg(data.msg, {icon: 5});
              clearInterval(resend);
              btn.html("获取验证码").removeAttr('disabled style');
            }
          });
        }

        //定时器按钮
        var resend = setInterval(function () {
          count--;
          if (count > 0) {
            btn.css("background-color", "#3bb149").html("(" + count + ")秒后可重新获取");
          } else {
            clearInterval(resend);
            self.user.codeMd5 = null;
            btn.html("获取验证码").removeAttr('disabled style');
          }
        }, 1000);
        btn.attr('disabled', true).css('cursor', 'not-allowed');
      },

      register: function () {
        $.post("/user/register", this.user, function (data) {
          if (data.success) {
            location.href = "/login";
          }
          else {
            layer.msg(data.msg, {icon: 5});
          }
        });
      }
    }
  });

</script>
#include('footer.html')
